Maatwerk checkout in JavaScript

Het bouwen van een aangepaste checkout flow stelt je in staat om de checkout ervaring van de klant volledig aan te passen aan jouw specifieke behoeften. Dit levert een unieke, gebrandmerkte reis op die de conversie kan verhogen en de klanttevredenheid kan verbeteren.

Het creëren van een aangepaste checkout is mogelijk door interactie met de Afosto GraphQL API, die toegankelijk is op afosto.app/graphql. Deze API omvat alle benodigde queries en mutaties om de vereiste informatie voor de winkelwagen aan te passen, zodat deze kan voortgaan door het checkout proces en de betaling kan starten.

Dankzij de veelzijdigheid van de GraphQL API kun je een checkout flow bouwen in vrijwel elke omgeving, zodat je de optimale ervaring aan je klanten kunt bieden.

Om te communiceren met de GraphQL API voor de volgende gidsen, zullen we de @afosto/storefront package. Dit houdt in dat we de client op een vergelijkbare manier instellen als wat je hebt gezien in eerdere secties:

1import StorefrontClient from '@afosto/storefront';
2
3const client = StorefrontClient({
4  storefrontToken: 'STOREFRONT_TOKEN',
5});

Het is echter belangrijk op te merken dat de client zelf niet standaard alle methoden bevat die nodig zijn voor het checkout proces. Wanneer de methode niet bestaat, zullen we de query methode van de client gebruiken om aangepaste queries en mutaties te bouwen en uit te voeren, waardoor we een directe interface met de GraphQL API kunnen bieden.

In de volgende gidsen zullen we het checkout proces uitleggen op basis van de stroom die de Hosted Checkout gebruikt.